import { lazy, Suspense } from 'react';
import { Navigate, useRoutes } from 'react-router-dom'
import Loading from '../components/Loding';
const Login = lazy(() => import("../pages/Login"))
const Main = lazy(() => import("../pages/Main"))
const NotFound = lazy(() => import("../components/404"))
const Home = lazy(() => import("../pages/Main/Home"))
const About = lazy(() => import("../pages/Main/About"))
const List = lazy(() => import("../components/List"))

const load = (Comp) => {
  return (
    <Suspense fallback={<Loading />}>
      <Comp />
    </Suspense>
  )
}

const routes = [
  {
    path: "/login",
    element: load(Login),
  },
  {
    path: "/main",
    element: load(Main),
    children: [
      {
        path: "/main/home",
        element: load(Home),
        children: [
          {
            path: "/main/home/music/:id",
            element: load(List)
          },
          {
            path: "/main/home/news/:id",
            element: load(List)
          },
        ]
      },
      {
        path: "/main/about",
        element: load(About)
      },
    ]
  },
  {
    path: "/",
    element: <Navigate to="/login" />
  },
  {
    path: "*",
    element: load(NotFound)
  },

]

export default routes;


//这样的写法,认为定义了 GetRoutes 组件 这个组件就是根据路由表生成的 路由配置结构
export const GetRoutes = () => {
  //在组件中在外层可以使用hook
  return useRoutes(routes)
}

//自定义hooks
export const useMyRoutes = () => {
  //在自定义hooks中是可以使用hook
  return useRoutes(routes)
}